/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

// import { NewAppScreen } from '@react-native/new-app-screen';
import {
  StatusBar,
  StyleSheet,
  useColorScheme,
  View,
  Text,
  Dimensions,
} from 'react-native';
import { useEffect, useState } from 'react';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
const { width, height } = Dimensions.get('window');
// import { createClient } from './src/utils/tcpClient';
import TcpSocket from 'react-native-tcp-socket';
import { bytesToData } from './src/utils/dataDispose';
import { Button } from '@ant-design/react-native';

const options = {
  port: 16009,
  host: '120.48.73.165',
};

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  const safeAreaInsets = useSafeAreaInsets();

  const [state, setState] = useState(false);

  const [data, setData] = useState([]);

  let clientT = null;

  // 初始化连接
  const createClient = () => {
    console.log('#开始连接');

    clientT = TcpSocket.createConnection(options, () => {
      // Write on the socket
      clientT.write('Hello server!');
      setState(true);
    });

    clientT.on('data', function (data) {
      console.log('message was received', data);

      setData(bytesToData(data));
    });

    clientT.on('error', function (error) {
      console.log(error);
    });

    clientT.on('close', function () {
      console.log('Connection closed!');
      setState(false);
    });
  };

  // effect
  useEffect(() => {
    createClient();
  }, []);

  return (
    <View style={styles.container}>
      {/* <NewAppScreen
        templateFileName="App.tsx"
        safeAreaInsets={safeAreaInsets}
      /> */}
      <Text>{data}</Text>
      <Text>{state ? 'on' : 'off'}</Text>
      <Text>{clientT}</Text>
      <Text>{width}</Text>
      <Text>{height}</Text>

      <Button type="primary">primary</Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;
